<section class="designer-new">
  <div class="row margin-reset">
    <div class="col-sm-8 left">
      <%= render partial: 'home/part_title', locals: { icon: nil, href: nil, title: '设计师入住', summary: 'DESIGNER' } %>

        <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit" action="/users" method="POST">
          <div class="row">
            <div class="">
              <%= flash_messages %>
            </div>

            <div class="col-xs-6 input-field">
              <validate auto-label class="required-field" :class="fieldClassName(formstate.name)">
                <label for="">真实姓名</label>
                <input class="form-control" name="user[name]" type="text" placeholder="您的真实姓名" required v-model.lazy="name">
                <field-messages name="user[name]" show="$touched || $submitted" class="col-xs-12 padding-reset error">
                  <div slot="required">请输入您的真实姓名</div>
                </field-messages>
              </validate>
            </div>

            <div class="col-xs-6 input-field">
              <validate auto-label class="required-field" :class="fieldClassName(formstate.name)">
                <label for="">职位</label>
                <input class="form-control" name="user[position]" type="text" placeholder="您的职位" required v-model.lazy="position">
                <field-messages name="user[position]" show="$touched || $submitted" class="col-xs-12 padding-reset error">
                  <div slot="required">请输入您的职位</div>
                </field-messages>
              </validate>
            </div>

            <% unless current_user %>

              <div class="col-xs-6 input-field">
                <validate auto-label class="required-field" :class="fieldClassName(formstate.name)">
                  <label for="phone">手机号</label>
                  <div class="row margin-reset">
                    <div class="col-xs-8 padding-reset">
                      <input label="false" class="form-control" placeholder="您的手机号" type="tel" name="user[mobile]" required v-model.lazy="cellphone" cellphone-validator>
                    </div>
                    <div class="col-xs-4 padding-reset">
                      <cellphone-code></cellphone-code>
                    </div>
                  </div>
                  <field-messages auto-label name="user[mobile]" show="$touched || $submitted" class="error">
                    <div slot="required">请输入手机号</div>
                    <div slot="cellphone-validator">请输入正确的手机号</div>
                  </field-messages>
                </validate>
              </div>

              <div class="col-xs-6 input-field">
                <validate auto-label class="required-field" :class="fieldClassName(formstate.name)">
                  <label for="code">验证码</label>
                  <input type="number" class="form-control" id="code" name="user[sms_code]" placeholder="您手机收到的验证码" required v-model.lazy="smsCode">
                  <field-messages auto-label name="user[sms_code]" show="$touched || $submitted" class="error">
                    <div slot="required">请输入验证码</div>
                  </field-messages>
                </validate>
              </div>

              <div class="col-xs-12 input-field">
                <validate auto-label class="required-field" :class="fieldClassName(formstate.name)">
                  <label for="code">账号密码</label>
                  <input type="password" name="user[password]" class="form-control" required v-model.lazy="password" minlength="6" placeholder="密码">

                  <field-messages auto-label name="user[password]" show="$touched || $submitted" class="error">
                    <div slot="required">请输入密码</div>
                    <div slot="minlength">密码至少6位</div>
                  </field-messages>
                </validate>
              </div>

              <% end %>

                <div class="col-xs-12 input-field">
                  <validate auto-label class="required-field" :class="fieldClassName(formstate.name)">
                    <label for="">个人介绍</label>
                    <textarea rows="3" cols="" class="form-control" name="user[description]" type="password" placeholder="请务必填写客观描述，比如您的职业经历，参与的项目，获得的成就，奖项等"
                      required v-model.lazy="description"></textarea>
                    <field-messages name="user[description]" show="$touched || $submitted" class="col-xs-12 padding-reset error">
                      <div slot="required">请输入您的个人介绍</div>
                    </field-messages>
                  </validate>
                </div>

                <div class="col-xs-12 input-field">
                  <label class="radio-inline">
                      <input type="radio" checked value="true">
                      我对因虚假资料引起的法律纠纷负全部责任。
                  </label>
                </div>

                <div class="col-xs-12 input-field text-center">
                  <%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
                  <%= hidden_field_tag :is_designer, true -%>
                  <button type="submit" class="btn btn-primary btn-submit">提交审核</button>
                </div>
          </div>
        </vue-form>
    </div>

    <div class="col-sm-4 padding-reset post">
    </div>
  </div>
</section>